<template>
  <div :class="prefixCls" class="h-[100%] relative overflow-x-hidden overflow-y-hidden bg-white <sm:(!overflow-y-auto)">
    <!-- Swiper轮播背景 -->
    <Swiper class="w-full h-full !absolute top-0 left-0 !z-0 <sm:(h-[30%])"
      :modules="[Mousewheel, Autoplay, Pagination]" :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :pagination="{ clickable: true, el: `.${prefixCls}__pagination` }" @swiper="setControlledSwiper($event)">
      <SwiperSlide v-for="(bg, index) in backgrounds" :key="index" class="w-full h-full">
        <img :src="bg" alt="" class="login_bg" />
      </SwiperSlide>
    </Swiper>
    <!-- 自定义分页器容器 -->
    <div :class="`${prefixCls}__pagination`"
      class="w-full absolute !bottom-[5%] text-center !z-10 <sm:(!top-[26%] h-[5%])"></div>
    <div class="relative h-full flex mx-auto flex-col lg:flex-row">
      <div
        :class="`${prefixCls}__left relative p-60px pb-150px w-57.5rem md:pb-1rem <md:(pb-1rem) <sm:(p-20px pt-44px pb-44px w-[100%] h-[30%])`">
        <!-- 左上角的 logo -->
        <div class="flex items-center text-white mb-10">
          <img alt="Logo" class="w-240px h-60px <sm:(w-5rem h-1.25rem)" src="@/assets/login/logoGreen.png"
            @dblclick="handleDoubleClick" />
        </div>
        <div class="flex justify-end items-end h-[calc(100%-60px)] <sm:(justify-center)">
          <TransitionGroup appear enter-active-class="animate__animated animate__bounceInLeft">
            <!-- 可以在这里添加欢迎信息 -->
          </TransitionGroup>
        </div>
      </div>
      <div class="w-full xl:w-62.5rem p-30px <sm:(p-38px pt-32px)">
        <!-- 登录表单 -->
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div class="h-full flex items-center m-auto w-[100%] max-w-[480px]">
            <LoginForm ref="loginFormRef" />
            <SSOLoginVue
              class="p-3rem px-4.5rem rounded-1xl shadow-login-win bg-white w-29.875rem <sm:(p-28px px-42px w-300px shadow-login-mobile)" />
          </div>
        </Transition>
      </div>
    </div>
    <!-- Footer -->
    <footer ref="footerRef"
      class="text-14px leading-20px text-[#fff] absolute bottom-5px w-full text-center z-5 <md:(fixed bottom-10px left-0 w-full text-12px leading-18px text-center px-10px text-[#fff]) <sm:(text-[#909399] text-12px) <xs:(text-12px)">
      Copyright @ 2020 武汉传媒学院 All Rights Reserved 电话:027-81979007 (招生咨询) 027-81979456
      (信访) 鄂ICP备14006246号
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
import { LoginForm, SSOLoginVue } from './components'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Mousewheel, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'

import BG1 from '@/assets/login/bg1.jpg'
import BG2 from '@/assets/login/bg2.jpg'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')

const backgrounds = [BG1, BG2]

const swiperRef = ref<InstanceType<typeof Swiper> | null>(null)
const footerRef = ref<HTMLElement | null>(null)
const loginFormRef = ref<InstanceType<typeof LoginForm> | null>(null)

const setControlledSwiper = (swiper) => {
  swiperRef.value = swiper;
};

const handleDoubleClick = () => {
  const autoplay = swiperRef.value.autoplay;
  autoplay.running ? autoplay.stop() : autoplay.start();
}

onMounted(() => {
  nextTick(() => {
    const footer = footerRef.value
    if (!footer) return

    const initialViewportHeight = window.visualViewport?.height ?? window.innerHeight

    const updateFooterVisibility = () => {
      if (window.innerWidth < 768) {
        const currentViewportHeight = window.visualViewport?.height ?? window.innerHeight
        footer.style.display =
          currentViewportHeight >= initialViewportHeight * 0.95 ? 'block' : 'none'
      } else {
        footer.style.display = 'block' // 大屏幕强制显示
      }
    }

    // 初始调用
    updateFooterVisibility()

    // 监听窗口变化
    if (window.visualViewport) {
      window.visualViewport.addEventListener('resize', updateFooterVisibility)
    }
    window.addEventListener('resize', updateFooterVisibility)

    // 清理事件监听
    onUnmounted(() => {
      if (window.visualViewport) {
        window.visualViewport.removeEventListener('resize', updateFooterVisibility)
      }
      window.removeEventListener('resize', updateFooterVisibility)
    })
  })
})
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  &__left {
    max-width: 100%; // 确保最大宽度不超过其父元素
    position: relative;
    z-index: 1;
    /* 确保左侧内容在背景上面 */
  }

  &__pagination {}
}

.login_bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s ease;
  /* 可选：添加平滑显隐效果 */
}
</style>
<style>
.swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1) !important;
  /* 激活状态下的颜色 */
}
</style>
